'use strict';

import React from 'react'
import ReactDOM from 'react-dom'
import Logo from './components/Logo'
import Excel from './components/Excel'
import Button from './components/Button'

  var header = ['Title', 'Year', 'Ratint', 'Comments'];
  var data = [['Test', '2018', '4', '酒类'],['User', '2018', '4', '啤酒']];

  ReactDOM.render(
    <div style={{padding: '20px'}}>
      <h1> Component Discover</h1>

      <h2>logo</h2>
      <div style={{dispaly: 'inline-block'}}>
        <Logo />
      </div>

      <h2>table</h2>
      <div style={{dispaly: 'inline-block'}}>
        <Excel header={header} initdata={data}  />
      </div>

      <h2>button</h2>
      <div>
        Button with onClick: <Button onClick={() => alert('you click the button')} >Click me</Button>
      </div>
      <div>
        A button: <Button href="www.baidu.com"> A Button</Button>
      </div>
      <div>
        mulity className button: <Button className="custome">classNames</Button>
      </div>

    </div>,
    document.getElementById("pad")
  )
